<template>
	<div class="mainAll">
		<div class="head">
			<div class="gotoSquare">
				<div class="left" @click="intoSquare"> 进入广场 <i class="iconfont iconjinru"></i></div>
			</div>
			<div class="nva">
				<ul>
					<li :class="{liAction:'habit'== chooseNva}" @click="habit">
						习惯分析
					</li>
					<li :class="{liAction:'collection'== chooseNva}" @click="collection">我的收藏</li>
					<li :class="{liAction:'share'== chooseNva}" @click="share">我的分享</li>
					<li :class="{liAction:'follow'== chooseNva}" @click="follow">我的关注</li>
				</ul>
			</div>
		</div>
		
		<div class="contents">
			<transition name="slide-left">
				<keep-alive>
						 <router-view></router-view>
				</keep-alive>
			</transition>
		</div>
	</div>


</template>
<script>
	import analysHabit from './AnalysisHabit.vue'
	export default {
		activated() {
			this.chooseNva  = 'habit'
		},
		data(){ 
			return{
				chooseNva:'habit',
				userMessage:{
					userId:'rooter',
					praise:'0',
					fllow:'0',
					fans:'0'
				}
				
			}
		},
		components: {
			analysHabit
		},
		methods:{
			intoSquare(){
				this.$router.push('/square')
			},
			//习惯分析
			habit(){
				this.chooseNva = 'habit';
				this.$router.push('analysisHabit')
			},
			//我的收藏
			collection(){
				this.chooseNva = 'collection'
				this.$router.push('meCollection')
			},
			//我的分享
			share(){
				this.chooseNva = 'share'
				this.$router.push('meShare')
			},
			//我的关注
			follow(){
				this.chooseNva = 'follow'
				this.$router.push('meFollow')
			},
		}
	}
</script>

<style scoped="scoped">
	.three span{
		display: inline-block;
		width: 30px;
		margin-left: 10px;
	}
	.mainAll {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
	}

	.head {
		width: 100%;
		height: 128px;
		background: url(../../../assets/pngImg/headx2.png) no-repeat;
		background-size: auto 128px;
		position: relative;
	}
	.gotoSquare {
		position: absolute;
		top: 20%;
		right: 50px;
		background-color: #fffcf1;
		padding: 2px 12px;
		border-radius: 5px;
		height: 36px;
		cursor: pointer;
		margin-left: 15px;
		font-weight: 900;
	}
	.gotoSquare .left{
		line-height: 36px;
		font-size: 22px;
	}
	.gotoSquare i {
		font-size: 20px;
		font-weight: 100;
	}
	.nva {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 45px;
		text-align: center;
		transform: translateX(-10px);
	}
	.nva ul {
		display: flex;
	}
	.nva ul li {
		color: #fff;
		flex: 1;
		line-height: 45px;
		font-size: 25px;
		font-weight: 400;
		height: 45px;
		letter-spacing: 2px;
		cursor: pointer;
		position: relative;
		transition: .5;
	}
  .liAction{
		color: #729bcd !important;
		font-size: 26px !important;
	}
	.liAction{
		border-radius: 5px;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #ffffff;
		opacity: .6;
		z-index: -1;
	}

	.contents {
		position: relative;
		box-sizing: border-box;
		margin: 20px 30px;
		background-color:  #f3f9f9;
		border-radius: 5px;
		/* width: 100%; */
		height: calc(100% - 210px);
		overflow: hidden;
	}
</style>
